<template>
  <el-dialog title="用户信息"
  :visible.sync="userInfoDialogVisible"
  width="80%"
  @open="openDialog"
  :before-close="beforeCloseDialog">
  <!-- 此行放头像和用户基本信息 -->
  <el-row>
     <el-col :span="4">
       <el-avatar
       :src="currentuserinfo.avatarimg"
       shape="square"
       :size="150"></el-avatar>
     </el-col>
     <el-col :span="20">
     <el-row class="userinfo">
       <el-col :span="8">
         <span class="usertitle">用户ID：</span>
         <span class="usercontent">{{currentuserinfo.id}}</span>
       </el-col>
       <el-col :span="8">
         <span class="usertitle">用户名：</span>
         <span class="usercontent">{{currentuserinfo.username}}</span>
       </el-col>
       <el-col :span="8">
         <span class="usertitle">用户状态：</span>
         <el-tag class="usercontent" :type="currentuserinfo.useable ? 'success' : 'danger' ">{{getuserstatus}}</el-tag>
       </el-col>
     </el-row>
     <el-row class="userinfo">
       <el-col :span="8">
        <span class="usertitle">用户性别：</span>
         <span class="usercontent">{{getusersex}}</span>
       </el-col>
       <el-col :span="8">
         <span class="usertitle">用户生日：</span>
         <span class="usercontent">{{currentuserinfo.birthday}}</span>
       </el-col>
       <el-col :span="8">
         <span class="usertitle">用户组：</span>
         <span class="usercontent">{{getusergroup}}</span>
       </el-col>
     </el-row>
     <el-row class="userinfo" type="flex" justify="space-between">
      <el-col :span="20">
         <span class="usertitle">Email地址：</span>
         <span class="usercontent">{{currentuserinfo.useremail}}</span>
      </el-col>
      <el-col :span="4">
        <el-button
        :type="currentuserinfo.useable ? 'danger' : 'success' "
        @click="changeUserStatus()"
        v-has="'change_userStatus'">{{userbutton}}</el-button>
        </el-col>
     </el-row>
     </el-col>
  </el-row>
  <el-divider content-position="center">用户评论({{length}})</el-divider>
  <!-- 子组件用来放这个用户的所有评论 -->
  <userComments
  :comments="currentuserinfo.comments"
  @shieldcomment="shieldcomment"
  @deletecomment="deletecomment">
  </userComments>
</el-dialog>
</template>

<script>
// 导入子组件
import userComments from './userComments'
// 导入网络请求
import { getchangestatus, getcommentstatus, getdeletecomment } from '../../../network/userManage'
export default {
  name: 'editUserInfoDialog',
  components: { userComments },
  data () {
    return {
      currentuserinfo: {},
      // 该用户有多少评论
      length: 0
    }
  },
  computed: {
    // 用户性别转换
    getusersex () {
      if (this.currentuserinfo.sex === 'man') {
        return '男'
      } else {
        return '女'
      }
    },
    // 用户状态转换
    getuserstatus () {
      if (this.currentuserinfo.useable === true) {
        return '正常'
      } else {
        return '禁用'
      }
    },
    // 用户组状态转换
    getusergroup () {
      if (this.currentuserinfo.group === 'user') {
        return '普通用户'
      } else {
        return '其他'
      }
    },
    // 禁用按钮
    userbutton () {
      if (this.currentuserinfo.useable === true) {
        return '禁用此用户'
      } else {
        return '解除禁用'
      }
    }
  },
  props: {
    userInfoDialogVisible: {
      type: Boolean,
      default: false
    },
    // 传入的用户信息
    userinfo: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  methods: {
    // 关闭前向父组件发送事件
    beforeCloseDialog () {
      this.$emit('closeDialog')
    },
    // 在打开对话框的时候把传入的userinfo赋值给当前data
    openDialog () {
      this.currentuserinfo = this.userinfo
      this.length = this.currentuserinfo.comments.length
    },
    // 按钮更改用户状态
    changeUserStatus () {
      // this.$axios.get('http://localhost:3033/changeuserstatus', {
      //   params: {
      //     id: this.currentuserinfo.id
      //   }
      // })
      getchangestatus(this.currentuserinfo.id).then(res => {
        this.currentuserinfo = res.data.userData
      })
    },
    // 用户评论列表用户评论状态切换
    shieldcomment (cid) {
      // this.$axios.get('http://localhost:3033/commentstatus', {
      //   params: {
      //     id: this.currentuserinfo.id,
      //     commentid: cid
      //   }
      // })
      getcommentstatus(this.currentuserinfo.id, cid).then(res => {
        this.currentuserinfo = res.data.userData
      })
    },
    // 删除用户评论操作
    deletecomment (cid) {
      // this.$axios.get('http://localhost:3033/deletecomment', {
      //   params: {
      //     id: this.currentuserinfo.id,
      //     commentid: cid
      //   }
      // })
      getdeletecomment(this.currentuserinfo.id, cid).then(res => {
        this.currentuserinfo = res.data.userData
        console.log(res.data.msg)
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
.userinfo
  line-height 40px
  height 40px
  .usertitle
    color #909399
</style>
